<template>
  <view class="store u-flex" >
    <item-image :type="'1'" :img="store.image" :height="50" :width="50"></item-image>
    <view class="u-flex" @click="picker">
      <view class="name">{{store.name}}</view>
      <u-icon name="arrow-down-fill"  color="#45806E" size="18"></u-icon>
    </view>
    <u-picker mode="selector" :range="list" v-model="show" @confirm="confirm" range-key="name"></u-picker>
  </view>
</template>

<script>
export default {
  name: "storeChange",
  data(){
    return{
      show:false,
      store:{
        name:'',
        id:'',
        image:'',
      },
    }
  },
  props:{
    //内容
    item: {
      type: Object,
      default: {}
    },
    //列表
    list: {
      type: Array,
      default: []
    },
  },
  watch:{
    list:{
      handler:function(val){
        this.list = val
        if(this.store.name == ''){
          this.store.name = this.list[0].name
          this.store.id = this.list[0].id
          this.store.image = this.list[0].image
        }
      },
      deep:true
    },
    item:{
      handler:function(val){
          this.store.name = val.name
          this.store.id = val.id
          this.store.image = val.image
      },
      deep:true
    }
  },
  created(){
    this.type = uni.getStorageSync('type')
    if(uni.getStorageSync('store') &&  this.type !=1){
      this.store = uni.getStorageSync('store')
    }
  },
  methods:{
    //选择门店
    confirm(e){
      this.store.name = this.list[e[0]].name
      this.store.id = this.list[e[0]].id
      this.store.image = this.list[e[0]].image
      uni.setStorage({
        key: 'store',
        data: this.list[e[0]],
        success: function () {
        }
      });
      this.$emit('change',this.store)
    },
    picker(){
      console.log(1111)
      //不是技师可以选择门店
      if(  this.type == 3 || this.type == 4){
        this.show = true
      }
    },
  },
}
</script>

<style scoped lang="scss">
  .store{
    background: white;
    padding-left: 32rpx;
    .name{
      font-size: 28rpx;
      font-weight: bold;
      margin-left: 32rpx;
      margin-right: 10rpx;
    }
  }
</style>